<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>点名册</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#container{
			width: 500px;
			height: 300px;
			border: 1px solid;
		}
		#container #info{
			height: 200px;
		}
		#container #start{
			display: block;
			margin: 0 auto;
			width: 100px;
			height: 50;
		}
		a{
			color: grey;
			float: right;
		}
		#modal{
			position: absolute;
			z-index: 999;
			width: 100%;
			height: 100%;
			top: 0;
			background: white;
			display: none;
		}
		#fork{
			width: 30px;
			height: 30px;
			position: absolute;
			right: 0;
			top: 0;
			text-align: center;
			line-height: 30px;
			background-color: black;
			opacity: 0.3;
			color: white;
			font-size: 20px;z-index: 999;
		}
		#allname,#add{
			width: 50%;
			height: 95%;
			
		}
		#allname{
			float: left;
		}
		#add{
			float: right;
			position: relative;
		}
		#a_s{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		#addname{
			width: 200px;
			height: 30px;
			resize: none;
			display: block;
			font-size: 25px;
		}
		#save{
			width: 50px;
			height: 30px;
			background: red;
			text-align: center;
			line-height: 30px;
		}
		#off,#true{
			width: 50px;
			height: 30px;
			position: absolute;
			bottom: 0;
			background-color: skyblue;
			text-align: center;
			line-height: 30px;
			border-radius: 5px;
		}
		#off{
			left:45%;
		}
		#true{
			right:45%;
		}
		
	</style>
</head>
<body>
	<div id="container">
		<div id="info"></div>
		<button id="start">开始</button><a href="javascript:void(0);" id="add_people">添加人员</a>
	</div>
	<div id="modal">
		<div id="allname"></div>
		<div id="fork">X</div>
		<div id="add">
			<div id="a_s">
				<input id="addname"></input>
				<div id="save">保存</div>
			</div>
			
		</div>
		<div id="off">取消</div>
		<div id="true">确认</div>
	</div>
	<script>
		//获取 id 
		var _add_people = document.getElementById("add_people"),
			_info = document.getElementById("info"),
			_start = document.getElementById("start"),
			_allname = document.getElementById("allname"),
			_fork = document.getElementById("fork"),
			_addname = document.getElementById("addname"),
			_save = document.getElementById("save"),
			_off = document.getElementById("off"),
			_modal = document.getElementById("modal"),
			_true = document.getElementById("true");

		//打开、关闭人员添加页面
			_add_people.onclick = function(){
				_modal.style.display = "block";
			}
			function disapper(){
				_modal.style.display = "none";
			};
			_fork.onclick = disapper;
			_off.onclick = disapper;

		//点击save 将名字保存在 allname
		_save.onclick = function(){
			var _name = _addname.value + ',';
			_allname.innerHTML += `<div style = "display:inline-block"; class = "a">${_name}</div>`;
			_addname.value = "";
		}
		_allname.onclick = function(e){
			var e = e || event,
				src = e.target || e.srcElement;
			console.log(e)
		}

		
		//list
		var list = [];
		var len = list.length;
		var rand =Math.floor(Math.random(0,1)*len);
		list[rand];
	</script>
</body>
</html>